<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <!-- 引用vue.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">

        {{this.title.split('').reverse().join('')}}

        <!-- 写在methods中的函数调用的时候一定要加()否则会将函数输出 -->
        {{methodmessage()}}

        <!-- 如果调用computed中的函数的时候不需要加() 如果()会报错 -->
        {{computedmessage}}
    </div>
    <script>
        let vm = new Vue({
            // 根据id获取到容器div
            el:"#app",
            // data表示数据
            data:{
              title:"123a456a789a01b"
            },
            methods:{
                 //对事件的处理   
                 methodmessage:function() {
                    return this.title.split('').reverse().join('');
                }  
            },
            computed: {
                //计算属性
                computedmessage:function() {
                    return  this.title.split('').reverse().join('');
                }
            }
        });
    </script>
    
</body>
</html>